<template>
  <uni-popup ref="popup" type="bottom">
    <view class="pBoxUp">
      <view class="textCenter f32 psTitle border-bottom">请选择时间</view>
      <view class="shopPopup bgff justify-between default-flex">
        <view class="f30 t666 lBox">
          <view
            v-for="(item, index) in jmhDay"
            @click="selectLDate(item)"
            :class="sLDate == item.formatDate ? 'ed' : ''"
            class="boxLDate"
            :key="index">
            {{ item.desc }}({{ item.name }})
          </view>
        </view>
        <view>
          <view
            v-for="(item, index) in timeList"
            @click="selectRDate(item)"
            :class="[
              sRightDate == item.time ? 'ed' : '',
              item.disabled ? 'disabled' : '',
            ]"
            :key="index"
            class="rBox">
            {{ item.time }}{{ item.disabled ? ' (超出时间)' : '' }}
          </view>
          <view
            class="empty f28 text-center"
            style="color: #999; margin-top: 40rpx"
            v-if="timeList.length < 1">
            今天没有时间了,看看明天吧
          </view>
        </view>
      </view>
      <view class="cancelButton" @click="close()">取消</view>
    </view>
  </uni-popup>
</template>

<script setup>
import { ref, nextTick } from 'vue'
import { getDate } from '../../utils/getDate'

const popup = ref(null)
const emit = defineEmits()
const sendTime = ref('')
const sRightDate = ref('')
const sLDate = ref('')
const jmhDay = ref('')
const timeList = ref([
  { disabled: false, time: '9:00-11:00', id: 1 },
  { disabled: false, time: '11:00-13:00', id: 2 },
  { disabled: false, time: '13:00-15:00', id: 3 },
  { disabled: false, time: '15:00-17:00', id: 4 },
  { disabled: false, time: '17:00-19:00', id: 5 },
  { disabled: false, time: '19:00-21:00', id: 6 },
])

const showBox = () => {
  popup.value.open()
}

const close = () => {
  popup.value.close()
}

const getWeekDate = (day) => {
  let weeks = new Array('周日', '周一', '周二', '周三', '周四', '周五', '周六')
  let week = weeks[day]
  return week
}

//获取当前日期的下一天日期
const getNextDay = () => {
  let day = getWeekDate(new Date().getDay())
  let newDate = /\d{4}-\d{1,2}-\d{1,2}/g.exec(new Date())
  let isDay = getDate().fullDate
  let nextDay = getWeekDate(
    new Date(new Date().getTime() + 24 * 60 * 60 * 1000).getDay()
  )
  let nDate = getDate(
    new Date(new Date().getTime() + 24 * 60 * 60 * 1000)
  ).fullDate
  let HDay = getWeekDate(
    new Date(new Date().getTime() + 48 * 60 * 60 * 1000).getDay()
  )
  let hDate = getDate(
    new Date(new Date().getTime() + 48 * 60 * 60 * 1000)
  ).fullDate
  let d1 = hDate.substr(hDate.indexOf('-') + 1)
  sLDate.value = isDay
  selectLDate(1)
  jmhDay.value = [
    { name: day, id: 1, formatDate: isDay, desc: '今天' },
    { name: nextDay, id: 2, formatDate: nDate, desc: '明天' },
    {
      name: HDay,
      id: 3,
      formatDate: hDate,
      desc:
        d1.substr(0, d1.indexOf('-')) +
        '月' +
        d1.substr(d1.indexOf('-') + 1) +
        '日',
    },
  ]
}

const selectRDate = (item) => {
  if (item.disabled) {
    return
  }
  sRightDate.value = item.time
  sendTime.value = sLDate.value + ' ' + item.time
  popup.value.close()
  emit('update-getTime', sendTime.value)
}

const selectLDate = (val) => {
  if (val != 1) {
    sLDate.value = val.formatDate
  }
  let t = [
    { disabled: false, time: '9:00-11:00', id: 1 },
    { disabled: false, time: '11:00-13:00', id: 2 },
    { disabled: false, time: '13:00-15:00', id: 3 },
    { disabled: false, time: '15:00-17:00', id: 4 },
    { disabled: false, time: '17:00-19:00', id: 5 },
    { disabled: false, time: '19:00-21:00', id: 6 },
  ]
  // 计算时间是否超时 false未超时 true超时
  if (val.desc == '今天' || val == 1) {
    if (new Date().getHours() <= 10) {
      timeList.value = t
    } else if (new Date().getHours() <= 12) {
      t[0].disabled = true
      timeList.value = t
    } else if (new Date().getHours() <= 14) {
      t[0].disabled = true
      t[1].disabled = true
      timeList.value = t
    } else if (new Date().getHours() <= 16) {
      t[0].disabled = true
      t[1].disabled = true
      t[2].disabled = true
      timeList.value = t
    } else if (new Date().getHours() <= 18) {
      t[0].disabled = true
      t[1].disabled = true
      t[2].disabled = true
      t[3].disabled = true
      timeList.value = t
    } else if (new Date().getHours() <= 20) {
      t[0].disabled = true
      t[1].disabled = true
      t[2].disabled = true
      t[3].disabled = true
      t[4].disabled = true
      timeList.value = t
    } else {
      t[0].disabled = true
      t[1].disabled = true
      t[2].disabled = true
      t[3].disabled = true
      t[4].disabled = true
      t[5].disabled = true
      timeList.value = t
    }
  } else 
  {
    timeList.value = t
  }
  sRightDate.value = ''
}

// 向外暴露
defineExpose({
  showBox,
  getNextDay
})
</script>

<style lang="scss" scoped>
.pBoxUp {
  background: #f5f5f5;
  .psTitle {
    line-height: 100rpx;
    text-align: center;
    border-bottom: 1rpx solid #f7f7f7;
  }
  .shopPopup {
    backgound: #ffffff;
    font-size: 32rpx;
    display: flex;
    justify-content: space-between;
  }
  .boxLDate {
    font-size: 24rpx;
    height: 80rpx;
    line-height: 80rpx;
    width: 273rpx;
    text-align: center;
  }
  .lBox {
    color: #666666;
    background: #f5f5f5;
    font-size: 30rpx;
  }
  .boxLDate.ed {
    color: #1da337;
    background: #fff;
  }
  .rBox.ed {
    color: #1da337;
  }
  .rBox {
    width: 239px;
    padding-left: 20rpx;
    font-size: 24rpx;
    color: #333;
    height: 80rpx;
    background: #fff;
    line-height: 80rpx;
  }
  .cancelButton {
    font-size: 36rpx;
    color: #999;
    text-align: center;
    height: 100rpx;
    line-height: 100rpx;
    border-top: 1px solid #e5e5e5;
    background: #fff;
  }
}
</style>
